<template>
    <div>
      <h3>优惠券增加</h3>
      <table class="table table-bordered">
        <tbody>
          <tr>
            <td >优惠类型</td>
            <td>
              <select v-model="state.Type">
                <option value="">请选择</option>
                <option :value="1">代金券</option>
                <option :value="2">折扣券</option>
                <option :value="3">兑换券</option>
              </select>
            </td>
          </tr>
          <tr>
            <td >优惠标题</td>
            <td><input type="text" v-model="state.Titel" /></td>
          </tr>
          <tr>
            <td >优惠颜色</td>
            <td><input type="color" v-model="state.Color" /></td>
          </tr>
          <tr>
            <td >数量</td>
            <td><input type="text" v-model="state.Count" /></td>
          </tr>
          <tr>
            <td >限领</td>
            <td>
              <input type="text" disabled v-model="state.Number" />
            </td>
          </tr>
          <tr>
            <td >使用条件</td>
            <td><input type="text" v-model="state.Money" /></td>
          </tr>
          <!-- 有条件显示 代金券时候显示 -->
          <tr v-if="state.Type == 1">
            <td >减免金额</td>
            <td><input type="text" v-model="state.ReleaseMoney" /></td>
          </tr>
          <!-- 有条件  折扣券的时候显示-->
          <tr v-if="state.Type == 2">
            <td >折扣</td>
            <td><input type="text" v-model="state.ZheKou" /></td>
          </tr>
          <tr>
            <td >开始时间</td>
            <td><input type="date" v-model="state.BeginTime" /></td>
          </tr>
          <tr>
            <td >结束时间</td>
            <td><input type="date" v-model="state.EenTime" /></td>
          </tr>
          <tr>
            <td >适用门店</td>
            <td>
              <select v-model="state.ShopId">
                <option :value="0">全部</option>
                <option :value="item.Id" v-for="item in data.list">
                  {{ item.ShopName }}
                </option>
              </select>
            </td>
          </tr>
          <tr>
            <td></td>
            <td><input type="button" value="添加" @click="ok" class="btn btn-success" /></td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script setup lang="ts">
  import { reactive, ref, onMounted } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import axios from 'axios';

  
  
  //创建一个路由器，实现页面跳转并且传参
  const router = useRouter();
  //创建路由信息对象，用来接受参数
  const route = useRoute();
  
  //声明后端需要的参数
  let queryInfo = reactive({
    shopName:'',
    Index:1,
    size:1000000000,
  });
  
  //存储后端返回的数据
  let data: any = reactive({
    list: [], //列表
    count: 0, //总条数
    page: 0, //总页数
  });
  
  //优惠券增加时向后端传递的数据
  let state: any = reactive({
    ShopId: 0, //全部门店
    Type: '',
    Titel: '',
    BeginTime: '',
    EenTime: '',
    Color: '#ff0000',
    Count: '',
    Money: '',
    Number: 1,
    ReleaseMoney: 0,
    ZheKou: 10,
  });
  
  onMounted(() => {
    getList();
  });
  
  //获取门店列表
  const getList = () => {
    axios({
      url:'/api/Shop/GetShopList',
      method: 'get',
      params: queryInfo,
    })
      .then((res) => {
        console.log(res);
        data.list = res.data.list;
        data.totalCount = res.data.totalCount;
        data.totalPage = res.data.totalPage;
      })
      .catch((err) => {
        console.log(err);
      });
  };
  
  //增加优惠券
  const ok = () => {
    //1.判断非空+有效性
    if (state.Type == '') {
      alert('优惠券类型必选');
      return;
    }
    if (state.Title == '') {
      alert('优惠券标题不能为空');
      return;
    }
    if (state.Count == '') {
      alert('优惠券数量不能为空');
      return;
    }
    //is N Number a An Number
    if (isNaN(Number(state.Count)) == true) {
      alert('优惠券数量只能数值类型');
      return;
    }
  
    if (state.Money == '') {
      alert('使用条件不能为空');
      return;
    }
  
    if (isNaN(Number(state.Money)) == true) {
      alert('优惠券使用条件只能是数值类型');
      return;
    }
  
    if (state.ReleaseMoney == '' && state.Type == 1) {
      alert('减免金额不能为空');
      return;
    }
  
    if (isNaN(Number(state.ReleaseMoney)) == true && state.Type == 1) {
      alert('优惠券减免只能是数值类型');
      return;
    }
    if (state.ZheKou == '' && state.Type == 2) {
      alert('折扣不能为空');
      return;
    }
    if (
      state.Type == 2 &&
      (Number(state.ZheKou) < 1 || Number(state.ZheKou) > 9.9)
    ) {
      alert('折扣只能是1-9.9之间的数字');
      return;
    }
  
    if (state.BeginTime == '') {
      alert('开始时间不能为空');
      return;
    }
    if (state.EenTime == '') {
      alert('结束时间不能为空');
      return;
    }
    //2.发送网络请求
  
    axios({
      url: '/api/DisCount/DisCountAdd',
      method: 'post',
      data: state,
    })
      .then((res) => {
        console.log(res);
        if (res.data == 1) {
          alert('添加成功');
        router.push('/discountList');
        } else if (res.data == -1) {
          alert('优惠券名称重复');
          return;
        } else {
          alert('优惠券添加失败');
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };
  </script>
  
  <style scoped></style>
  